<script setup lang="ts" name="menu-management">
import type { PlusColumn } from 'plus-pro-components'

import { useDelDept, useGetDeptList } from '@fl/api/iam-api/department'
import { SearchForm } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './component/add-or-edit.vue'
import { TextDict, TypeDict } from './constant'
import { useTable } from './hooks/use-table'

// 搜索条件、分页参数
type RequestIndex = {
    deptName?: string
    status?: string
}
const initialState = {
    deptName: '',
    status: '',
}
const state = ref<RequestIndex>(cloneDeep(initialState))

const { arrayToTree } = useTable()
const detail = reactive<any>({})
const show = ref<boolean>(false)
const tableData = ref<any>([])
const loading = ref<boolean>(false)

const { mutate: delMutate } = useDelDept()

const params = computed(() => ({
    ...state.value,
}))
const { data } = useGetDeptList(params)
watchEffect(() => {
    if (data.value) {
        const res = cloneDeep(data.value)
        console.log('res', res)
        // 有条件时，平级展示
        if (state.value.deptName || state.value.status) {
            tableData.value = res
        }
        else {
            tableData.value = arrayToTree(res, 'parentId', 'deptId')
        }
    }
})

// 搜索
function submit(values: RequestIndex) {
    state.value = { ...values }
}

// 重置
function reset() {
    state.value = initialState
}

function goToAdd(row: any) {
    if (row) {
        detail.value = {
            parentId: row.deptId,
            status: '0',
        }
    }
    else {
        detail.value = null
    }
    show.value = true
    console.log('goToAdd', detail.value)
}

function goToEdit(row: any) {
    show.value = true
    detail.value = row
    console.log('goToEdit', detail.value)
}

function goToDel(row: any) {
    delMutate(row.deptId, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

const AuthOption = [
    {
        label: '正常',
        value: '0',
    },
    {
        label: '停用',
        value: '1',
    },
]

const columns: PlusColumn[] = [
    {
        label: '部门名称',
        prop: 'deptName',
        valueType: 'copy',
    },
    {
        label: '状态',
        options: AuthOption,
        prop: 'status',
        valueType: 'select',
    },
]
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="搜索"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard mb-20>
        <div class="mb-20"
             flex
        >
            <ElButton type="primary"
                      @click="goToAdd(null)"
            >
                + 新增
            </ElButton>
        </div>

        <ElTable v-loading="loading"
                 :data="tableData"
                 style="width: 100%"
                 row-key="deptId"
                 lazy
                 border
                 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                 :default-expand-all="true"
                 :height="550"
        >
            <ElTableColumn label="部门名称"
                           min-width="180"
            >
                <template #default="scope">
                    {{ scope.row.deptName }}
                </template>
            </ElTableColumn>

            <ElTableColumn prop="orderNum"
                           label="排序"
                           min-width="100"
            />

            <ElTableColumn label="状态"
                           min-width="100"
            >
                <template #default="scope">
                    <ElTag :type="TypeDict[scope.row.status]">
                        {{ TextDict[scope.row.status] }}
                    </ElTag>
                </template>
            </ElTableColumn>

            <ElTableColumn prop="createTime"
                           label="创建时间"
                           min-width="180"
            />

            <ElTableColumn label="操作"
                           width="240"
            >
                <template #default="{ row }">
                    <div class="flex"
                         style="justify-content:start;"
                    >
                        <el-button v-if="row.status === '0'"
                                   type="primary"
                                   text
                                   @click="goToAdd(row)"
                        >
                            新增
                        </el-button>

                        <el-button type="primary"
                                   text
                                   @click="goToEdit(row)"
                        >
                            编辑
                        </el-button>

                        <el-popconfirm title="确认删除吗？"
                                       @confirm="goToDel(row)"
                                       v-if="row.parentId !== 0"
                        >
                            <template #reference>
                                <el-button text
                                           type="warning"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </ElTableColumn>
        </ElTable>
    </ElCard>

    <AddOrEdit v-model:show="show"
               :data="detail"
               template
    />
</template>
